<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>图标选择器</title>
	<link rel="stylesheet" href="../assets/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../assets/css/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
	<link rel="stylesheet" href="../assets/css/public.css" media="all">
	<style>
		.layui-iconpicker-body.layui-iconpicker-body-page .hide {
			display: none;
		}
	</style>
</head>

<body>
	<div class="admin-container">
		<div class="admin-main">
			<blockquote class="layui-elem-quote">
				fa图标选择器根据开源Layui-IconPicker插件修改而来。<br>
				不同的参数的地方是，去掉了type参数，新增url参数，url参数为fa图标less/variables.less文件路径。<br>
				<a href="https://gitee.com/wujiawei0926/iconpicker" target="_blank" class="layui-btn layui-btn-danger">Layui-IconPicker</a>
			</blockquote>
			<div class="layui-form">
				<div class="layui-form-item">
					<label for="" class="layui-form-label">默认图标</label>
					<div class="layui-input-inline">
						<input type="text" id="iconPicker" lay-filter="iconPicker" class="hide">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="" class="layui-form-label">自定义图标</label>
					<div class="layui-input-block">
						<input type="text" id="iconPicker1" value="fa fa-arrows" lay-filter="iconPicker2" class="hide">
					</div>
				</div>
			</div>
			<pre class="layui-code">
iconPicker.render({
	elem: '#iconPicker', // 选择器，推荐使用input
	url: "../assets/js/lay-module/iconPicker/4.7.0.json", // fa 图标接口
	width: 200,	// 选择器宽度，默认 100%
	ratio: 0.8,	// 图标高度和宽度的比值, 默认 0.8
	search: true, // 是否开启搜索：true/false，默认true
	row: 3, // 每页图标行数，默认 3，<= 0 不开启分页
	column: 4, // 每行图标个数，默认 4
	select: function(fa) { // 选择回调
		// console.log(fa);
	},
	success: function(elem) { // 渲染成功后的回调
	}
});
			</pre>
		</div>
	</div>
	<script src="../assets/lib/layui/layui.js" charset="utf-8"></script>
	<script src="../assets/js/lay-config.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['iconPicker', 'form', 'layer'], function() {
			var iconPicker = layui.iconPicker,
				form = layui.form,
				layer = layui.layer,
				$ = layui.$;

			iconPicker.render({
				elem: '#iconPicker', // 选择器，推荐使用input
				url: "../assets/js/lay-module/iconPicker/4.7.0.json", // fa 图标接口
				width: 250, // 选择器宽度，默认 100%
				ratio: 0.8, // 图标高度和宽度的比值, 默认 0.8
				search: true, // 是否开启搜索：true/false，默认true
				row: 3, // 每页图标行数，默认 3，<= 0 不开启分页
				column: 4, // 每行图标个数，默认 4
				select: function(fa) { // 选择回调
					// console.log(fa);
				},
				success: function(elem) { // 渲染成功后的回调
				}
			});

			iconPicker.render({
				elem: '#iconPicker1', // 选择器，推荐使用input
				url: "../assets/js/lay-module/iconPicker/4.7.0.json", // fa 图标接口
				// width: 250, // 选择器宽度，默认 100%
				ratio: 0.8, // 图标高度和宽度的比值, 默认 0.8
				search: true, // 是否开启搜索：true/false，默认true
				row: 0, // 每页图标行数，默认 3，<= 0 不开启分页
				column: 10, // 每行图标个数，默认 4
				select: function(fa) { // 选择回调
					// console.log(fa);
				},
				success: function(elem) { // 渲染成功后的回调
				}
			});
		});
	</script>
</body>

</html>